<template>
  <el-form ref="formRef" class="hl-form" :inline="formConfig.inline" :model="formConfig.formObj" :rules="formConfig.rules" :label-position="formConfig.labelPosition" :label-width="formConfig.labelWidth">
    <el-col v-for="(item, index) in formConfig.formList" :key="index" :span="item.span">
      <el-form-item :label="item.label" :prop="item.prop">
        <el-input
          v-if="item.type == 'input'"
          v-model="formConfig.formObj[item.prop]"
          :disabled="item.disabled"
          :placeholder="item.placeholder || '请输入'"
          :style="{width: item.width || '180px'}"
          @change="inputChange($event, index, item.prop)"
        />
        <el-input
          v-if="item.type == 'textarea'"
          v-model="formConfig.formObj[item.prop]"
          :disabled="item.disabled"
          type="textarea"
          :placeholder="item.placeholder || '请输入'"
          :style="{width: item.width || '180px'}"
          @change="inputChange($event, index, item.prop)"
        />
        <el-select
          v-if="item.type == 'select'"
          v-model="formConfig.formObj[item.prop]"
          :disabled="item.disabled"
          :placeholder="item.placeholder || '请选择'"
          :style="{width: item.width || '180px'}"
          @change="selectChange($event, index, item.prop)"
        >
          <el-option
            v-for="(option, optionIndex) in item.options"
            :key="optionIndex"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <el-date-picker
          v-if="item.type == 'datePicker'"
          v-model="formConfig.formObj[item.prop]"
          type="date"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          :disabled="item.disabled"
          :placeholder="item.placeholder || '请选择'"
          :style="{width: item.width || '180px'}"
        />
        <el-date-picker
          v-if="item.type == 'dateTimePicker'"
          v-model="formConfig.formObj[item.prop]"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          :disabled="item.disabled"
          :placeholder="item.placeholder || '请选择'"
          :style="{width: item.width || '180px'}"
        />
        <!-- <el-date-picker
          v-if="item.type == 'datePickerRange'"
          v-model="formConfig.formObj[item.prop]"
          value-format="yyyy-MM-dd"
          type="daterange"
          :disabled="item.disabled"
          :placeholder="item.placeholder || '请选择'"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        /> -->
        <el-time-picker
          v-if="item.type == 'timePicker'"
          v-model="formConfig.formObj[item.prop]"
          value-format="HH:mm:ss"
          format="HH:mm:ss"
          :disabled="item.disabled"
          :placeholder="item.placeholder || '请选择'"
        />
        <el-switch
          v-if="item.type == 'switch'"
          v-model="formConfig.formObj[item.prop]"
          :disabled="item.disabled"
          @change="switchChange($event, index, item.prop)"
        />
        <el-radio-group
          v-if="item.type == 'radio'"
          v-model="formConfig.formObj[item.prop]"
          :disabled="item.disabled"
          @change="radioChange($event, index, item.prop)"
        >
          <el-radio v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.label" :value="option.value" />
        </el-radio-group>
        <el-checkbox-group v-if="item.type == 'checkbox'" v-model="formConfig.formObj[item.prop]" :disabled="item.disabled">
          <el-checkbox v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.label" :value="option.value" />
        </el-checkbox-group>
      </el-form-item>
    </el-col>
  </el-form>
</template>

<script>
const defaultConfig = {
  inline: true,
  formObj: {}, // 绑定的表单值
  formList: [], // 表单列表
  rules: {},
  labelPosition: 'right',
  labelWidth: '120px'
}
export default {
  props: {
    config: {
      type: Object, // 表单配置
      default: () => {}
    }
  },
  data() {
    return {
      formConfig: {
        ...defaultConfig,
        ...this.config
      }
    }
  },
  methods: {
    inputChange(value, index, prop) {
      this.$emit('inputChange', value, index, prop)
    },
    selectChange(value, index, prop) {
      this.$emit('selectChange', value, index, prop)
    },
    switchChange(value, index, prop) {
      this.$emit('switchChange', value, index, prop)
    },
    radioChange(value, index, prop) {
      this.$emit('radioChange', value, index, prop)
    },
    submitForm() {
      let formValidate = false
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          formValidate = true
        } else {
          this.$message.warning('请把信息填写完整！')
        }
      })
      return formValidate
    },
    resetForm() {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style scoped>
.hl-form /deep/ .el-form-item {
  display: flex;
}
.hl-form /deep/ .el-form-item__content {
  width: 100%;
}
</style>
